<template>
    <div id="addaddress">
        <div class="header">
            <van-nav-bar title="不凡" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div class="content">
            <div class="item">
                <van-field v-model="userName" placeholder="姓名" />
            </div>
            <div class="item">
                <van-field v-model="telNumber" placeholder="手机号码" />
            </div>
            <div class="item">
                <van-field
                    v-model="address"
                    @click="isAreaShow = !isAreaShow"
                    readonly
                    placeholder="省份、城市、区县"
                />
            </div>
            <div class="item">
                <van-field v-model="detailadress" placeholder="详细地址，如楼道、楼盘号等" />
            </div>
            <div class="end">
                <van-checkbox shape="square" v-model="isDefault">设置为默认地址</van-checkbox>
            </div>
            <van-button type="primary" block color="#b4282d" @click="saveAddress">保存</van-button>
            <van-popup v-model="isAreaShow" position="bottom">
                <van-area
                    title="地址"
                    :area-list="area"
                    :columns-placeholder="['请选择', '请选择', '请选择']"
                    @confirm='cityChecked'
                />
            </van-popup>
        </div>
    </div>
</template>
<script>
import area from '../../../assets/address.js'
import { detailAction , saveAction } from '@/api/address'
export default {
    data() {
        return {
            userName: "",
            telNumber: "",
            address: "",
            isAreaShow: false,
            detailadress: "",
            isDefault: false,
            area,
            userName:'',
            telNumber:'',
            openId:'',
            detailadress:'',
            checked:true,

        };
    },
    created() {
        this.openId = localStorage.getItem('openId');
        
        this.getdetailAddress()
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        cityChecked(e){
            console.log(e);
            var name = e.map(el => el.name);
            console.log(name);
            this.address = name.join(' ');
            this.isAreaShow = !this.isAreaShow;
            console.log(this.address,this.isAreaShow);
        },
        async getdetailAddress(){
            const data = await detailAction({
                id:this.$route.query.id
            });
            console.log(this.$route.query.id);
            console.log(data);
            this.userName = data.data.name;
            this.telNumber = data.data.mobile;
            this.address = data.data.address;
            this.detailadress = data.data.address_detail;
            this.isDefault = data.data.is_default ==1 ? true : false;
        },
        async saveAddress(){
            // var that = this;
            const data = await saveAction({
                address: this.address,
                // addressId: that.id,
                checked: this.checked,
                detailadress: this.detailadress,
                openId: this.openId,
                telNumber: this.telNumber,
                userName: this.userName,
            })
            console.log(data);
            this.$router.push('/pages/addressSelect')
        }
    },
};
</script>
<style lang="scss" scoped>
#addaddress {
    height: 100vh;
    background: #f4f4f4;
    border-top: 1px solid transparent;
    font-size: 0.32rem;
    padding-bottom: 1.333333rem;
    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }
    .content {
        background-color: #fff;
        height: calc(100vh - 1.24rem);
        margin-top: 1.22667rem;
        overflow: auto;
        border-top: 0.01333rem solid transparent;
        .item {
            width: 9.2rem;
            margin: 0 auto;
            padding: 0.13333rem 0;
            border-bottom: 1px solid #f4f4f4;
        }
        .end {
            width: 9.2rem;
            margin: 0 auto;
            padding: 0.13333rem 0;
            margin-top: 0.53333rem;
            display: flex;
            justify-content: space-between;
            border: none;
        }
    }
}
.van-button {
    position: absolute;
    bottom: 0;
}
</style>